<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
        <el-form-item label="反馈日期">
            <el-date-picker  size="small"
                v-model="queryParams.beginDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="反馈标题">
            <el-input v-model="queryParams.title"  clearable size="small"></el-input>
        </el-form-item>
        <el-form-item label="反馈状态">
            <el-select v-model="queryParams.status" clearable  size="small">
                <el-option label="启用" value="1"></el-option>
                <el-option label="停用" value="0"></el-option>
            </el-select>
        </el-form-item>
        
        
        
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button  icon="el-icon-search" size="mini" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd(null)"
          >新增反馈任务</el-button>
        </el-col>
        <!-- <el-col :span="1.5">
        <el-button
            type="warning"
            icon="el-icon-circle-check"
            size="mini"
            @click="operationStatus(1)"
            :disabled="multiple"
            >启用</el-button>
        </el-col>
        <el-col :span="1.5">
            <el-button
            type="warning"
            icon="el-icon-circle-close"
            size="mini"
            @click="operationStatus(0)"
            :disabled="multiple"
            >停用</el-button>
        </el-col> -->
      </el-row>
      <el-table v-loading="loading" :data="configList" row-key="id" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="反馈标题" align="center" prop="title" :show-overflow-tooltip="true"/>
        <el-table-column label="反馈描述" align="center" prop="descContent" :show-overflow-tooltip="true" >
        </el-table-column>
        <el-table-column label="反馈类型" align="center" prop="type" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
                <el-tag v-if="scope.row.type==1" type="success">健康码上传</el-tag>
                <el-tag v-if="scope.row.type==2" type="info">否</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="涉及范围" align="center" prop="scope" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
                <el-tag v-if="scope.row.type==1" >班级</el-tag>
                <el-tag v-if="scope.row.type==2" >年级</el-tag>
                <el-tag v-if="scope.row.type==3" >全校</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="开始日期" align="center" prop="beginDate" :show-overflow-tooltip="true" >
        </el-table-column>
        <el-table-column label="结束日期" align="center" prop="endDate" :show-overflow-tooltip="true" >
        </el-table-column>

        <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
                <el-tag v-if="scope.row.status=='1'" >启用</el-tag>
                <el-tag v-if="scope.row.status=='0'" type="info">停用</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="提交时间" align="center" width="150" prop="createTime" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                {{parseTime(scope.row.createTime)}}
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180" fixed="right">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <el-button size="mini" circle type="success" icon="el-icon-edit" @click="handleEdit(scope.row)" />
                  </el-tooltip>
                  
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button size="mini" circle type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" />
                  </el-tooltip>
                  
                  <el-tooltip class="item" effect="dark" content="预览" placement="top">
                    <el-button size="mini" circle  icon="el-icon-view" @click="viewContent(scope.row)" />
                  </el-tooltip>
                </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <el-dialog title="编辑反馈任务" :visible.sync="open" width="50%">
        <el-form ref="formData" :model="formData" :rules="rules" label-width="120px">
            <el-row>
              <el-col :span="12">
                  <el-form-item label="反馈任务标题" prop="title">
                      <el-input v-model="formData.title" style="width:60%"></el-input>
                  </el-form-item>
              </el-col>
                  <el-col :span="12">
                  <el-form-item label="反馈类型" prop="type">
                    <el-select v-model="formData.type" clearable style="width:60%">
                      <el-option v-for="item in feedbackTypeList" :key="item.id" 
                      :value="item.dictValue" :label="item.dictLabel"></el-option>
                    </el-select>
                  </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                  <el-form-item label="反馈开始日期" prop="beginDate">
                    <el-date-picker style="width:60%"
                      v-model="formData.beginDate"
                      value-format="yyyy-MM-dd"
                      type="date"
                      :picker-options="expireTimeOPtion"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
              </el-col>
                  <el-col :span="12">
                  <el-form-item label="反馈结束日期" prop="endDate">
                    <el-date-picker style="width:60%"
                      v-model="formData.endDate"
                      value-format="yyyy-MM-dd"
                      type="date"
                      :picker-options="expireTimeOPtion"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col >
                <el-form-item label="涉及范围" prop="scope">
                    <el-select v-model="formData.scope" clearable  @change="selectScope">
                      <el-option value="1" label="班级"></el-option>
                      <el-option value="2" label="年级"></el-option>
                      <el-option value="3" label="全校"></el-option>
                    </el-select>
                    <!--班级-->
                    <el-select v-if="formData.scope==1" multiple collapse-tags v-model="formData.classIds" placeholder="选择班级" clearable>
                        <el-option v-for="item in classList" :label="item.className" :value="item.id+''" :key="item.id"></el-option>
                    </el-select>
                    <!--年级-->
                    <el-select v-if="formData.scope==2" v-model="formData.gradeId">
                        <el-option v-for="item in gradeList" :key="item.id" :label="item.dictLabel+''" placeholder="选择年级" :value="item.dictValue+''"></el-option>
                    </el-select>
                  </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="反馈描述内容" >
                <el-input v-model="formData.descContent"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitEpidemic">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      
      <el-dialog title="反馈任务执行情况" :visible.sync="viewOpen" width="70%">
        <el-table v-loading="scopeLoading" :data="scopeList" row-key="id">
          <el-table-column label="序号" type="index" width="55" align="center" />
          <el-table-column label="反馈标题" align="center" prop="title" :show-overflow-tooltip="true"/>
          <el-table-column label="班级名称" align="center" prop="className" :show-overflow-tooltip="true" >
          </el-table-column>
          <el-table-column label="班主任名称" align="center" prop="teacherId" :show-overflow-tooltip="true" >
              
          </el-table-column>
          <el-table-column label="是否已反馈" align="center" prop="isFeedback" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
                  <el-tag v-if="scope.row.isFeedback=='1'" >已反馈</el-tag>
                  <el-tag v-if="scope.row.isFeedback=='0' || !scope.row.isFeedback" type="info">未反馈</el-tag>
              </template>
          </el-table-column>
          <el-table-column label="待反馈日期" align="center" prop="todoFeedbackDate" :show-overflow-tooltip="true" >
          </el-table-column>
          <el-table-column label="实际反馈时间" align="center" prop="feedbackTime" :show-overflow-tooltip="true" >
          </el-table-column>
          <el-table-column label="状态" align="center" width="150" prop="status" :show-overflow-tooltip="true" >
              <template slot-scope="scope">
                  <el-tag v-if="scope.row.status=='1'" >有效</el-tag>
                  <el-tag v-if="scope.row.status=='0'" type="info">无效</el-tag>
              </template>
          </el-table-column>
          <el-table-column label="详情" align="center" >
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="预览" placement="top">
                    <el-button size="mini" circle  icon="el-icon-view" @click="handleStudent(scope.row)" />
                  </el-tooltip>
                </template>
        </el-table-column>
        </el-table>
  
        <pagination
          v-show="scopeCount>0"
          :total="scopeCount"
          :page.sync="scopeParams.pageNum"
          :limit.sync="scopeParams.pageSize"
          @pagination="getScopeList"
        />
        <div slot="footer" class="dialog-footer">
          <el-button @click="viewOpen=false">关闭</el-button>
        </div>
      </el-dialog>

      <el-dialog title="编辑反馈任务" :visible.sync="studentOpen" width="70%">
        <el-table v-loading="studentLoading" :data="studentList" >
            <el-table-column label="序号" align="center" type="index"/>
            <el-table-column label="学生姓名" align="center" prop="name" :show-overflow-tooltip="true"/>
            <el-table-column label="手机号" align="center" prop="phone" :show-overflow-tooltip="true"/>
            <el-table-column label="是否提交" align="center" prop="feedbackTime" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.feedbackTime" type="success">已提交</el-tag>
                <el-tag v-else type="info">未提交</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="监护人" align="center" prop="guardianName" :show-overflow-tooltip="true"/>
            <el-table-column label="监护人关系" align="center" prop="relationOfGuardian" :show-overflow-tooltip="true"/>
            <el-table-column label="监护人手机号" align="center" prop="guardianPhoneNumber" :show-overflow-tooltip="true"/>
            <el-table-column label="健康码" align="center" prop="healthCodeImages" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <el-image v-if="scope.row.healthCodeImages"
                    style="width: 40px; height: 40px"
                    :src="upload.showUrl+scope.row.healthCodeImages" 
                    :preview-src-list="[upload.showUrl+scope.row.healthCodeImages]"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{scope.row.remarks}}
                </template>
            </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </template>
  
  <script>

  import { infoPageList,addInfo,scopePageList,updateInfo,deleteByPrimaryKey} from "@/api/prevention/epidemic";
  import { findAllSchoolClass } from "@/api/studentInfo/infoMaintenance/index";
  import { listFeedBack} from "@/api/workflow/todo";
  
  export default {
    name: "Config",
    data() {
      var validateDatePass = (rule, value, callback) => {
        if (this.formData.beginDate>this.formData.endDate) {
          callback(new Error('结束时间要大于开始时间'));
        } else {
          this.$refs['formData'].clearValidate(['beginDate','endDate'])
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
            if(this.formData.scope==1 && (!this.formData.classIds || this.formData.classIds.length<1)){
                callback(new Error('请选择班级'));
            }
            if (this.formData.scope==2 && !this.formData.gradeId) {
                callback(new Error('请选择年级'));
            } else {
            // this.$refs['leaveFormData'].clearValidate(['leaveStartTime','leaveEndTime'])
                callback();
            }
        };
      return {
        expireTimeOPtion: {
          disabledDate(time) {
            return time.getTime() <= Date.now() - 1 * 24 * 3600 * 1000 //如果没有后面的-8.64e7就是不可以选择今天的
          },
        },
        upload:{
            showUrl:process.env.VUE_APP_BASE_API + "/school/file/"
        },
        viewOpen:false,
        open:false,
        // 遮罩层
        loading: true,
        multiple:true,
        // 选中数组
        ids: [],
        // 总条数
        total: 0,
        // 参数表格数据
        configList: [],
        // 日期范围
        dateRange: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          noticeType:0
        },
        isAddMonthPlan:false,

        consultMajorList:[],
        formData:{
        },
        rules:{
          title:[{ required: true, message: "参数名称不能为空", trigger: "blur" }],
          type:[{ required: true, message: "请选择反馈类型", trigger: "blur" }],
          beginDate:[
            { required: true, message: "请选择反馈开始日期", trigger: "blur" },
            { validator: validateDatePass, trigger: 'blur' }
          ],
          endDate:[
            { required: true, message: "请选择反馈结束日期", trigger: "blur" },
            { validator: validateDatePass, trigger: 'blur' }
          ],
          scope:[
            { required: true, message: "请选择反馈范围", trigger: "blur" },
            { validator: validatePass, trigger: 'blur' }  
          ],
        },
        classList:[],
        gradeList:[],
        scopeParams:{
          pageNum: 1,
          pageSize: 10,
        },
        scopeCount:0,
        scopeList:[],
        scopeLoading:false,
        studentList:[],
        studentOpen:false,
        studentLoading:false,
        feedbackTypeList:[]
      };
    },
    created() {
      this.getList();
      this.getDicts("feedback_type").then(response => {
          this.feedbackTypeList = response.data;
      });
    },
    methods: {
      handleStudent(row){
        this.studentOpen = true
        this.studentLoading = true
        listFeedBack({scopeId:row.id}).then(resp=>{
          this.studentList = resp.data
          this.studentLoading = false
        })
      },
      getScopeList(){
        this.scopeLoading = true;
        scopePageList(this.scopeParams).then(resp=>{
          this.scopeList = resp.data.list;
          this.scopeCount = resp.data.total;
          this.scopeLoading = false;
        })
      },
      viewContent(row){
        this.viewOpen = true
        this.scopeParams.pi_id=row.id
        this.getScopeList()
      },
      getClassList(){
            findAllSchoolClass().then(resp=>{
                this.classList = resp.data
            })
        },
      selectScope(val){
            if(val==1){//查询有效的班级
                this.getClassList()
            }
            if(val==2){//查询有效的班级
                this.getDicts("class_grade").then(response => {
                    this.gradeList = response.data;
                });
            }
            
        },
      handleReset(){
        this.queryParams={
          pageNum: 1,
          pageSize: 10,
          noticeType:0
        }
        this.getList();
      },
      /** 查询参数列表 */
      getList() {
        this.loading = true;
        infoPageList(this.queryParams).then(response => {
            this.configList = response.data.list;
            this.total = response.data.total;
            this.loading = false;
          }
        );
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      handleClose(){
          //关闭窗口
          this.editPlanVisible = false
      },
      handleAdd(){
        this.resetFormData()
        this.open = true

      },
      handleEdit(row){
        this.formData=row
        this.selectScope(this.formData.scope)
        if(this.formData.classId){
          console.log(this.formData.classId)
          this.formData.classIds = this.formData.classId.split(',')
        }
        this.open = true
      },
      handleUpdate(row){
          
      },
      handleDelete(row){
          //删除
          const _this = this
           this.$confirm('是否确认删除吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            deleteByPrimaryKey({id:row.id}).then(resp=>{
              if(resp.code==200){
                  _this.msgSuccess("删除成功");
                  _this.handleQuery()
              }
          })
          })
          
      },
      resetFormData(){
          this.formData={
            title:null,
            type:null,
            beginDate:null,
            beginDate:null,
            scope:null,
            classId:null,
            gradeId:null,
            descContent:null
          }
          this.resetForm("formData");
      },
      handleSelectionChange(selection){

      },
      submitEpidemic(){
        //提交反馈内容
        this.$refs["formData"].validate(valid => {
          if (valid) {
            if(this.formData.id){
              updateInfo(this.formData).then(resp=>{
                this.msgSuccess("提交成功");
                this.getList()
                this.open = false
              })
            }else{
              addInfo(this.formData).then(resp=>{
                this.msgSuccess("提交成功");
                this.getList()
                this.open = false
              })
            }
            
          }
        })
      },
      cancel(){
        this.open = false
      }
      
    }
  };
  </script>
